import React from "react";
import ReactDOM from 'react-dom';
export default class Hello extends React.Component {
  state = {
    name: "hello",
    desc: "描述1111",
    isAgree: false,
    city:1,
    gender:'男'
  };
  hName = (e) => {
    this.setState({ name: e.target.value });
  };

  hDesc = (e) => {
    this.setState({ desc: e.target.value });
  };

  hAgree = (e) => {
    this.setState({ isAgree: e.target.checked });
  };
  hCity = (e) => {
    this.setState({ city: e.target.value });
  };
  hSex= (e) => {
      console.log(e.target.checked, e.target.value)
    this.setState({ gender: e.target.checked });
  };

  sumbit = () => {
      console.log(this.state)
  }
  render() {
    return (
      <div>
        <button onClick={this.sumbit}>提交</button>
        <br />
        <input type="text" onChange={this.hName} value={this.state.name} />
        <br />

        <br/>
        <textarea value={this.state.desc} onChange={this.hDesc} />
        <br />
        <select value={this.state.city} onChange={this.hCity}>
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">广州</option>
          <option value="4">深圳</option>
        </select>
        <br/>
        男：<input type="radio" name="sex" value="1" onChange={this.hSex}/>
        女：<input type="radio" name="sex" value="0" onChange={this.hSex} checked/>
        <br/>
        <input
          type="checkbox"
          checked={this.state.isAgree}
          onChange={this.hAgree}
        />
        是否同意
      </div>
    );
  }
}


ReactDOM.render(
    <div>
      <Hello />
    </div>, document.getElementById('root')) 
